<template>
  <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
    <el-form-item prop="password" :label="$t('profile.oldPassword')">
      <el-input v-model="dataForm.password" type="password" show-password></el-input>
    </el-form-item>
    <el-form-item prop="newPassword" :label="$t('profile.newPassword')">
      <el-input v-model="dataForm.newPassword" type="password" show-password></el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword" :label="$t('profile.confirmPassword')">
      <el-input v-model="dataForm.confirmPassword" type="password" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleDataForm">{{ $t('confirm') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/store/user'

// import { validatePassword } from '@/utils/validate'

import type { FormInstance, FormRules } from 'element-plus'
import { PwdDTO } from '@/store/user/data'

const userStore = useUserStore()

const { t } = useI18n()

const dataFormRef = ref<FormInstance>()

const dataForm = reactive<PwdDTO>({
  password: '',
  newPassword: '',
  confirmPassword: '',
})

const dataRules = reactive<FormRules<PwdDTO>>({
  password: [{ required: true, message: t('required'), trigger: 'blur' }],
  newPassword: [{ required: true, message: t('required'), trigger: 'blur' }],
  confirmPassword: [{ required: true, message: t('required'), trigger: 'blur' }],
})

const handleDataForm = () => {
  dataFormRef.value!.validate((valid) => {
    if (!valid) return

    // 修改密码
    userStore.updatePwdAction(dataForm)
  })
}
</script>
